<template>
  <div>
    <Modal
      :title="L('CreateNewMentEle')"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
    >
      <Form
        ref="FormData"
        label-position="right"
        :label-width="120"
        :rules="userRule"
        :model="menuElement"
      >
        <FormItem :label="L('MenuElement.Name')" prop="name">
          <Input v-model="menuElement.name" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('MenuElement.DisplayName')" prop="displayName">
          <Input v-model="menuElement.displayName" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('MenuElement.PermissionKey')" prop="permissionKey">
          <Input v-model="menuElement.permissionKey" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('MenuElement.CssStyle')" prop="path">
          <Input v-model="menuElement.cssStyle" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.Icon')" prop="icon">
          <Input v-model="menuElement.icon" :maxlength="50" :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('UiMenu.UiMenuId')" prop="uiMenuId">
          <Cascader
            :data="permissionTree"
            v-model="menuElement.uiMenuIdArr"
            filterable
            change-on-select
          ></Cascader>
        </FormItem>
        <FormItem :label="L('UiMenu.Order')" prop="order">
          <InputNumber v-model="menuElement.order"></InputNumber>
        </FormItem>
        <FormItem :label="L('UiMenu.isEnable')" prop="isenable">
          <i-switch v-model="menuElement.isEnable"></i-switch>
        </FormItem>
        <FormItem :label="L('UiMenu.Remark')" prop="remark">
          <Input v-model="menuElement.remark" :maxlength="50" :minlength="2"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button @click="save" type="primary">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import MenuElement from "../../../store/entities/menuElement";
@Component
export default class CreateMenuElement extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  @Prop() permissionTree: any;
  menuElement: MenuElement = new MenuElement();
  get roles() {
    return this.$store.state.uiMenu.roles;
  }
  save() {
    (this.$refs.FormData as any).validate(async (valid: boolean) => {
      if (valid) {
        this.menuElement.uiMenuId = this.menuElement.uiMenuIdArr.pop();
        //console.log(this.menuElement.uiMenuId);
        var createele = await this.$store.dispatch({
          type: "uiMenu/createEle",
          data: this.menuElement,
        });
        if (createele.data.success == true) {
          (this.$refs.FormData as any).resetFields();
          this.$emit("save-success");
          this.$emit("input", false);
          this.$Notice.success({
            title: "成功",
            desc: "添加成功.",
          });
        } else {
          this.$Notice.success({
            title: "成功",
            desc: "删除成功.",
          });
        }
      }
    });
  }
  cancel() {
    (this.$refs.FormData as any).resetFields();
    this.$emit("input", false);
  }
  visibleChange(value: boolean) {
    if (!value) {
      this.$emit("input", value);
    }
  }

  //表单提交 为空提醒
  userRule = {
    name: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur",
      },
    ],
    displayName: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur",
      },
    ],
    permissionKey: [
      {
        required: true,
        message: this.L("不可为空"),
        trigger: "blur",
      },
    ],
  };
  created() {
    // this.menuElement.uiMenuIdArr=[]
  }
}
</script>

